<template>
  <div class="person">
    <h1>姓名: {{ name }}</h1>
    <h1>年龄: {{ age }}</h1>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="showtel">电话</button>
  </div>
</template>
<!-- <script lang="ts">
  export default {
    name: "Person"
  }
</script> -->

<script lang="ts" setup name ="Person1">
  let name = "张三"
  let age = 23
  let phone = "1376372131"
  function updateName() {
      name = "李四"; // 注意： 这样修改name, 页面是没有变化的
      console.log(name); // name确实改了，但是name不是响应式的
    } 

    function updateAge() {
      age +=1;// 注意： 这样修改age, 页面是没有变化的
      console.log(age);// age确实改了，但是age不是响应式的
    }

    function showtel() {
      alert(phone);// 注意： 这样修改phone, 页面是没有变化的
      console.log(phone);// phone确实改了，但是phone不是响应式的
    }
</script>
<style>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 5px;
}
</style>